<template>
  <el-drawer
    title="模板配置"
    @close="handleCloseDrawer"
    :visible.sync="dialogVisible"
    v-if="dialogVisible"
    direction="rtl"
    :destroy-on-close="true"
    :wrapperClosable="false"
    size="500px"
    append-to-body
    :show-close="false"
  >
    <div class="template-wrap">
      <el-form ref="form" :rules="rules" :model="ruleForm" label-width="120px">
        <el-form-item label="文件类型" prop="formwork_name">
          <el-input
            v-model="ruleForm.formwork_name"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="文件模板" prop="formwork_list" ref="imgRef0">
          <UploadLink :files.sync="ruleForm.formwork_list"></UploadLink>
        </el-form-item>
        <div
          style="margin-top: 20px; text-align: center; padding-bottom: 20px"
          v-if="!disable"
        >
          <el-button @click="handleCloseDrawer">取消</el-button>
          <el-button type="primary" @click="handleClickSubmit()"
            >保存</el-button
          >
        </div>
      </el-form>
    </div>
  </el-drawer>
</template>
  
<script>
import UploadLink from "@/components/uploadFile/uploadLink.vue";
import {
  formworkCreate,
  formworkDetail,
  formworkUpdate,
  formworkExamine,
} from "@/api/qms.js";

export default {
  data() {
    return {
      ruleForm: {
        formwork_name: "", // 文件类型
        formwork_list: [], // 文件模板
      },
      rules: {
        formwork_name: [
          { required: true, message: "请输入文件类型", trigger: "blur" },
          {
            validator: this.checkName,
            trigger: "change",
          },
        ],
        formwork_list: [
          { required: true, message: "请上传文件模板", trigger: "blur" },
        ],
      },
      typeData: [],
    };
  },
  computed: {
    disable() {
      return this.mode === "detail";
    },
  },
  // mode =>表单模式，'add'：新增，'edit'：编辑，'detail'：详情
  props: ["dialogVisible", "id", "mode"],
  mounted() {
    if (this.mode === "edit" || this.mode === "detail") {
      this.getDetail();
    }
  },
  watch: {
    "ruleForm.formwork_list": function (val) {
      this.$refs.imgRef0.clearValidate();
    },
  },
  components: {
    UploadLink,
  },
  methods: {
    // // 初始化表单数据
    // initFormData(formData) {
    //     this.ruleForm.formwork_name = formData.formwork_name;
    //     this.ruleForm.fileList = formData.fileList;
    // },
    checkName(rule, val, cb) {
      if (val) {
        formworkExamine({
          id: this.mode === "add" ? 0 : this.ruleForm.id,
          formwork_name: val,
        }).then((res) => {
          const data = res.data || {};
          if (data.id > 0) {
            cb(new Error("文件类型已存在"));
          } else {
            cb();
          }
        });
      }
    },

    getDetail() {
      formworkDetail({ id: this.id }).then((res) => {
        const data = res.data;
        data.formwork_list = data.formwork_list.map((item) => {
          return {
            name: item.file_name,
            url: item.file_url,
          };
        });
        this.ruleForm = data;
      });
    },
    handleClickSubmit() {
      this.$refs["form"].validate((valid) => {
        if (!valid) return;
        const _ruleForm = {
          ...this.ruleForm,
          formwork_list: this.ruleForm.formwork_list.map((item) => {
            return {
              file_name: item.name,
              file_url: item.url,
            };
          }),
        };
        if (this.mode === "add") {
          formworkCreate(_ruleForm).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "新建成功",
                type: "success",
              });
              this.$emit("close", true);
            } else {
              this.$message({
                message: res.message,
                type: "error",
              });
            }
          });
        } else {
          formworkUpdate(_ruleForm).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "新建成功",
                type: "success",
              });
              this.$emit("close", true);
            } else {
              this.$message({
                message: res.message,
                type: "error",
              });
            }
          });
        }
      });
    },
    handleCloseDrawer() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
.template-wrap {
  padding-right: 15px;
}
</style>
